<template>
	<u-sticky style="top: 0;" id="sticky">
		<w-navbar :fixed="false" title="水晶明细"></w-navbar>
		<view class="tab">
			<w-tabs
			:current="current"
			:tabList="tabList" 
			:itemStyle="{padding:0}"
			@change="changeTab"></w-tabs>
			<w-icon name="more-cate" size="16" class="right" @click="openSelect"></w-icon>
		</view>
		<block v-if="isshow">
			<!-- 选择 -->
			<view class="select">
				<view @click="selecTypeChange(1)" :class="{'pop':showPop,'opacity':selectType==2}">
					<text>种类</text>
					<w-icon name="arrow-down" size="12" class="icon" :class="{'rotate':selectType==1&&showPop}"></w-icon>
				</view>
				<view @click="selecTypeChange(2)" :class="{'pop':showPop,'opacity':selectType==1}">
					<text>时间</text>
					<w-icon name="arrow-down" size="12" class="icon" :class="{'rotate':selectType==2&&showPop}"></w-icon>
				</view>
			</view>
			
			<view class="line" style="width: 100%;height: 32rpx;" v-if="!showPop"></view>

			<!-- 弹窗 -->
			<u-popup @close="showPop=false" bgColor="#fff" :show="showPop" mode="top" round="10" zIndex="-1" :overlayStyle="{top:popTop}" :customStyle="{top:popTop}">
				<view class="searcList" @touchmove.stop @touchstart.stop>
					<view v-for="(items,idx) in popList" :key="idx" @click="selectPop(items)">
						<w-icon class="mr-4" name="check1" size="20" v-if="param.type==items.value || param.m==items.value"></w-icon>
						<text :class="{'font-color-textPrimary':param.type==items.value || param.m==items.value}">{{ items.name }}</text>
					</view>
				</view>
			</u-popup>
		</block>
	</u-sticky>
</template>

<script>
	export default {
		data() {
			return {
				isshow:false,
				showPop:false,
				popTop:0,
				selectType:'',  // 1 种类 2时间
				
				current:0,
				tabList:[
					{ type:'',name:'全部' },
					{ type:'1',name:'水晶获取' },
					{ type:'-1',name:'水晶消耗' }
				],
				
				popList:[],
				type:[
					{ name:'黄水晶',value:'yellow' },
					{ name:'紫水晶',value:'purple' },
					{ name:'蓝水晶',value:'blue' },
				],
				
				param:{
					type:'',
					m:'',
					cat:''
				}
			}
		},
		methods:{
			// 类型切换
			changeTab(e) {
				this.current = e.index;
				this.param = this.$options.data().param;
				this.isshow = false;
				this.param.cat = e.type;
				this.$emit('change',this.param)
			},
			
			// 收/展 筛选
			openSelect() {
				this.isshow = !this.isshow;
				this.$nextTick(()=>{
					uni.createSelectorQuery().in(this).select('#sticky').boundingClientRect(data => {
						this.popTop = (data.height - 16) * 2 + 'rpx';
					}).exec();
				})
			},
			
			// 筛选切换
			selecTypeChange(type){
				if((this.selectType==1 && type==1) || (this.selectType==2 && type==2)){
					this.showPop = !this.showPop;
					return
				}
				this.selectType = type
				if(type==1){
					this.popList = this.type;
				}else{
					this.popList = this.$tools.getTwoYears();
				}
				this.showPop = true
			},
			
			// 筛选选择
			selectPop(e) {
				let val = e.value;
				this.selectType == 1 && (this.param.type = val);
				this.selectType == 2 && (this.param.m = val);
				this.showPop = false;
				this.selectType = '';
				this.$emit('change',this.param)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#sticky {
		/deep/ .u-sticky__content {
			background-image: url('@/static/bg/my-bg.png');
			background-position: top;
			background-size: 100% auto;
		}
		/deep/ .u-fade-enter-active{
			z-index: -1 !important;
		}
		.tab{
			width: 100%;
			position: relative;
			padding: 20rpx 120rpx;
			.right{
				position: absolute;
				top: calc(50% - 16rpx);
				right: 32rpx;
			}
		}
		.select{
			width: 100%;
			@extend .plr-16,.flex;
			>view{
				padding: 12rpx;
				border-radius: 16rpx;
				background-color: #fff;
				font-size: 24rpx;
				@extend .font-color-textPrimary,.mr-12,.flex-center;
				>text{ margin-right: 16rpx; }
				>.icon{ transition: 0.5s; }
				>.rotate{ transform: rotate(180deg); }
			}
			>.pop{
				border-radius: 16rpx 16rpx 0 0;
			}
			>.opacity{
				opacity: .5;
			}
		}
		.searcList{
			width: 100%;
			max-height: 60vh;
			overflow-y: scroll;
			@extend .ptb-18;
			>view{
				width: 100%;
				height: 100rpx;
				@extend .flex,.flex-ai-center,.plr-18,.font-size-14,.font-color-999;
			}
		}
	}
</style>
